<!--
 * FilePath     : \src\views\home\components\service.vue
 * Author       : SJZ
 * Date         : 2025-03-24 21:18
 * LastEditors  : SJZ
 * LastEditTime : 2025-04-03 22:30
 * Description  : 服务
 * CodeIterationRecord: 
 -->
<template>
  <div class="aline-start px-10% mt-50 box-border">
    <div class="w-470 h-500 m-10 pt-100 box-border">
      <h2>
        What services <br />
        we're offering
      </h2>
      <p>China's leading automobile exporter</p>
      <div class="w-300 bg-#307ff9 c-#ffffff text-center py-10 mt-50">Online Service</div>
    </div>
    <div class="w-470 h-500 m-10 pos-relative" v-for="(service, index) in services" :key="index">
      <img :src="service.image" :alt="service.title" width="100%" height="100%" class="object-contain" />
      <div class="service-description pos-absolute wh-full y-aline-end bottom-0 c-#ffffff p-40 box-border cursor-pointer">
        <i :class="`iconfont ${service.icon} fs-50 mb--8`"></i>
        <h2 class="fw-bold">{{ service.title }}</h2>
        <div class="hidden" v-html="service.description"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
defineProps({
  services: {
    type: Array as PropType<Record<string, string>[]>,
    require: true
  }
});
</script>
<style lang="scss" scoped>
.service-description {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
  &:hover {
    div {
      display: block;
    }
  }
}
</style>
